<template>
  <view class="container">
    <view class="form-card">
      <view class="form-title">添加自定义菜品</view>
      
      <view class="form-item">
        <text class="label">菜品名称</text>
        <input 
          v-model="form.name" 
          placeholder="请输入菜品名称"
          class="input"
        />
      </view>
      
      <view class="form-item">
        <text class="label">菜品描述</text>
        <textarea 
          v-model="form.description" 
          placeholder="请输入菜品描述"
          class="textarea"
          maxlength="100"
        />
      </view>
      
      <view class="form-item">
        <text class="label">所需积分</text>
        <input 
          v-model="form.points" 
          type="number"
          placeholder="请输入积分"
          class="input"
        />
      </view>
      
      <view class="form-item">
        <text class="label">菜品分类</text>
        <view class="radio-group">
          <view 
            class="radio-item"
            :class="{ active: form.category === 'breakfast' }"
            @tap="form.category = 'breakfast'"
          >
            早餐
          </view>
          <view 
            class="radio-item"
            :class="{ active: form.category === 'dinner' }"
            @tap="form.category = 'dinner'"
          >
            晚餐
          </view>
        </view>
      </view>
      
      <view class="form-item">
        <text class="label">菜品图片</text>
        <view class="image-upload" @tap="chooseImage">
          <image v-if="form.image" :src="form.image" mode="aspectFill" class="preview-image" />
          <view v-else class="upload-placeholder">
            <u-icon name="camera" size="40" color="#ccc" />
            <text>点击上传图片</text>
          </view>
        </view>
      </view>
      
      <view class="form-item">
        <text class="label">主要食材</text>
        <input 
          v-model="form.ingredients" 
          placeholder="请输入主要食材，用逗号分隔"
          class="input"
        />
      </view>
      
      <view class="form-item">
        <text class="label">营养信息</text>
        <input 
          v-model="form.nutrition" 
          placeholder="请输入营养信息"
          class="input"
        />
      </view>
      
      <view class="form-actions">
        <button class="btn-cancel" @tap="goBack">取消</button>
        <button class="btn-submit" @tap="submitDish">添加菜品</button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { useDishStore } from '@/store/modules/dish'

const dishStore = useDishStore()

const form = ref({
  name: '',
  description: '',
  points: 10,
  category: 'breakfast',
  image: '',
  ingredients: '',
  nutrition: '',
  tags: ['自定义'],
  isCustom: true
})

const chooseImage = () => {
  uni.chooseImage({
    count: 1,
    sizeType: ['compressed'],
    sourceType: ['album', 'camera'],
    success: (res) => {
      form.value.image = res.tempFilePaths[0]
    }
  })
}

const goBack = () => {
  uni.navigateBack()
}

const submitDish = () => {
  if (!form.value.name) {
    uni.showToast({ title: '请输入菜品名称', icon: 'none' })
    return
  }
  
  if (!form.value.points || form.value.points <= 0) {
    uni.showToast({ title: '请输入有效的积分', icon: 'none' })
    return
  }
  
  const newDish = {
    id: Date.now(),
    ...form.value,
    categoryId: form.value.category === 'breakfast' ? 2 : 3
  }
  
  // 添加到自定义菜品
  dishStore.customDishes.push(newDish)
  dishStore.dishes.push(newDish)
  
  uni.showToast({
    title: '添加成功',
    icon: 'success'
  })
  
  setTimeout(() => {
    uni.navigateBack()
  }, 1500)
}
</script>

<style lang="scss" scoped>
.container {
  padding: 20rpx;
  background: #f5f5f5;
  min-height: 1334rpx;
}

.form-card {
  background: #fff;
  border-radius: 20rpx;
  padding: 40rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.form-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 40rpx;
  text-align: center;
}

.form-item {
  margin-bottom: 30rpx;
  
  .label {
    display: block;
    font-size: 28rpx;
    color: #666;
    margin-bottom: 10rpx;
  }
  
  .input {
    width: 100%;
    height: 80rpx;
    padding: 0 20rpx;
    border: 1rpx solid #e0e0e0;
    border-radius: 10rpx;
    font-size: 28rpx;
  }
  
  .textarea {
    width: 100%;
    min-height: 120rpx;
    padding: 20rpx;
    border: 1rpx solid #e0e0e0;
    border-radius: 10rpx;
    font-size: 28rpx;
  }
}

.radio-group {
  display: flex;
  gap: 20rpx;
  
  .radio-item {
    flex: 1;
    padding: 20rpx;
    text-align: center;
    border: 1rpx solid #e0e0e0;
    border-radius: 10rpx;
    font-size: 28rpx;
    color: #666;
    
    &.active {
      background: #ff6b81;
      color: #fff;
      border-color: #ff6b81;
    }
  }
}

.image-upload {
  width: 200rpx;
  height: 200rpx;
  border: 1rpx dashed #e0e0e0;
  border-radius: 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  
  .preview-image {
    width: 100%;
    height: 100%;
    border-radius: 10rpx;
  }
  
  .upload-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #ccc;
    font-size: 24rpx;
  }
}

.form-actions {
  display: flex;
  gap: 20rpx;
  margin-top: 40rpx;
  
  .btn-cancel,
  .btn-submit {
    flex: 1;
    height: 80rpx;
    border-radius: 40rpx;
    font-size: 30rpx;
    border: none;
  }
  
  .btn-cancel {
    background: #f5f5f5;
    color: #666;
  }
  
  .btn-submit {
    background: #ff6b81;
    color: #fff;
  }
}
</style>